<template>
  <div class="home">
    <div>
      <!-- 登录按钮 -->
      <a-button
        v-if="LoginVisible"
        type="danger"
        style="float: right"
        @click="login"
        >Login</a-button
      >
      <!-- 登出按钮 -->
      <a-button v-else type="danger" style="float: right" @click="logOut"
        >LogOut</a-button
      >
    </div>
    <div><p class="title">TO-DO LIST</p></div>

    <slot></slot>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
export default {
  props: {
    LoginVisible: false, //登录按钮可视
  },
  methods: {
    login() {
      this.$router.push("Login");
    },
    logOut() {
        
      window.sessionStorage.clear();
      message.info('退出成功！')
      this.$router.push('/login')
      
    },
    CheckVisibale() {
      if (window.sessionStorage.getItem("token")) this.LoginVisible = false;
      else this.LoginVisible = true;
    },
  },
};
</script>

<style scoped>
.home {
  text-align: center;
  background: linear-gradient(to bottom, #ff4b51, #ff5c7e);
  height: 100vh;
  margin: 0 auto;
}
.title {
  width: 35%;
  min-width: 300px;
  line-height: 100px;
  margin: 0 auto;
  font-size: 30px;
  color: white;
}
</style>